import React, { useEffect } from 'react'
// import EmployeeList from "../../pages/StaffManage/EmployeeList";
// import NewEmployees from "../../pages/StaffManage/NewEmployees";
// import RolePermissions from "../../pages/StaffManage/RolePermissions";
// import DepartmentSettings from '../../pages/StaffManage/DepartmentSettings';
import { NavLink } from 'react-router-dom'
import header from './Header.module.css'
import { Input, Button, DatePicker, Select } from 'antd';
import { DeploymentUnitOutlined, InfoCircleOutlined, UserOutlined, PlusCircleOutlined, DownOutlined, UpOutlined } from '@ant-design/icons'
import { useState } from 'react';
import { inject, observer } from 'mobx-react'
import Service from '../../service';


function Header(props) {
    const searchinfo = props.departmentSettingsStore.searchInfo
    const { Option } = Select
    const [attend, setAttend] = useState(false)
    const [list, setList] = useState([])
    console.log(2);
    useEffect(() => {
        getList()
    }, [])
    const getList = async () => {
        const result = await Service.StaffManage.DepartmentSettings.freshList()
        if (result.code === 200) {
            setList(result.data)
        }
    }
    const onChange = (e) => {
        console.log(e.target.dataset.key, e.target.value);
        let newobj = { ...props.departmentSettingsStore.searchInfo }
        newobj[e.target.dataset.key] = e.target.value
        props.departmentSettingsStore.setSearchInfo(newobj)
    }
    const search = async () => {
        const obj = { ...props.departmentSettingsStore.searchInfo }
        obj.current_page = props.departmentSettingsStore.current_page
        obj.page_size = props.departmentSettingsStore.page_size
        console.log(obj);
        const result = await Service.StaffManage.EmployeeList.searchList(obj)
        props.departmentSettingsStore.setData(result.data.map((item) => {
            item.key = item.user_id
            return item
        }))
        props.departmentSettingsStore.setTotal = (result.count)
        console.log(result, 111);
    }
    const reFresh = () => {
        props.departmentSettingsStore.setSearchInfo({
            department: '',
            end_birthday: '',
            phone_number: '',
            resignation_status: '',
            sex: '',
            start_birthday: '',
            user_name: ''
        })
        props.departmentSettingsStore.getList()
    }
    const menulist = [
        { url: 'departmentSettings', title: '部门设置', bgc: '#498eca', icon: <DeploymentUnitOutlined className={header.icon} /> },
        { url: 'rolePermissions', title: '角色权限', bgc: '#498eca', icon: <InfoCircleOutlined className={header.icon} /> },
        { url: 'employeeList', title: '员工列表', bgc: '#498eca', icon: <UserOutlined className={header.icon} /> },
        { url: 'newEmployees', title: '新增员工', bgc: '#149e83', icon: <PlusCircleOutlined className={header.icon} /> }

    ]
    return (
        <>

            <div className={header.container}>
                <ul className={header.left}>
                    {
                        menulist.map((item) => {
                            return <li className={header.li} key={item.url} ><NavLink className={({ isActive }) => isActive ? header.b : header.a} to={item.url} >{item.icon}{item.title}</NavLink></li>
                        })
                    }
                </ul>
                <div className={header.right}>
                    <Input type="text" className={header.input} placeholder='员工账号、姓名、手机号' />
                    <Button type="primary" size='small' className={header.search}>搜索</Button>
                    <Button type="primary" size='small' className={header.highSearch} onClick={() => { setAttend(!attend) }}>高级搜索 {attend ? <UpOutlined /> : <DownOutlined />}</Button>
                </div>

            </div>
            {
                !attend ? null : <div>
                    <div className={header.searchList}>
                        <div>姓名：
                            <Input value={searchinfo.user_name} className={header.input} data-key='user_name' onChange={(e) => onChange(e)} />
                        </div>
                        <div>性别：
                            <Select onChange={(e) => onChange({ target: { value: e, dataset: { key: 'sex' } } })} placeholder='请选择' value={searchinfo.sex} style={{ width: '120px' }}>
                                <Option value="1">男</Option>
                                <Option value="0">女</Option>
                            </Select>
                        </div>
                        <div>手机号码：
                            <Input className={header.input} data-key='phone_number' value={searchinfo.phone_number} onChange={(e) => onChange(e)} />
                        </div>
                        <div style={{ display: 'flex' }}>
                            生日：
                            <DatePicker style={{ width: '40%' }} onChange={(value, dateString) => onChange({ target: { value: dateString, dataset: { key: 'start_time' } } })} />~
                            <DatePicker style={{ width: '40%' }} onChange={(value, dateString) => onChange({ target: { value: dateString, dataset: { key: 'end_time' } } })} />
                        </div>
                        <div>部门：
                            <Select placeholder='请选择' style={{ width: '120px' }} value={searchinfo.department} onChange={(e) => onChange({ target: { value: e, dataset: { key: 'department' } } })}>
                                {
                                    list.map((item) => <Option key={item.dept_id} value={item.dept_id}>{item.dept_title}</Option>)
                                }
                            </Select>
                        </div>
                        <div>是否离职：
                            <Select placeholder='是否离职' style={{ width: '120px' }} value={searchinfo.resignation_status} onChange={(e) => onChange({ target: { value: e, dataset: { key: 'resignation_status' } } })}>
                                <Option value="0">已离职</Option>
                                <Option value="1">在职</Option>
                            </Select>
                        </div>
                    </div>
                    <div className={header.up}>
                        <Button size='large' onClick={search}>立即搜索</Button>
                        <Button size='large' onClick={reFresh}>清空条件</Button>
                    </div>
                </div>
            }



        </>
    )
}
export default inject('departmentSettingsStore')(observer(Header))

